<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="UTF-8">
<style type="text/css">
body {
    font-family: "Arial", Helvetica, sans-serif;
    background-color: #000000;
    color:#ffffff;
}
/* Bright links that only underline when tracked */
a:link      { color:#00ffff; text-decoration: none; }
a:visited   { color:#00ffff; text-decoration: none; }
a:hover     { color:#00ffff; text-decoration: underline; }
a:active    { color:#20ffff; text-decoration: none; }
.video_box, .video_box_full, .video_box_alt {
    vertical-align: middle;
    text-align: center;
    width:75%;
    height:auto;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
}
.video_box_full {
    width:100%;
    height:auto;
}
.video_box_alt {
    width:auto;
    height:100%;
}
.videoplayer, .videoplayer_full {
    z-index:0;
    width:100%;
    height:auto;
}
.videoplayer_alt {
    width:auto;
    height:100%;
}
.video_controls, .video_controls_full, .video_controls_alt {
    display: table;
    padding: 0;
    margin: 0;
    z-index:1;
    line-height: 32px;
    vertical-align: middle;
    width: 100%;
    height: 32px;
}
.video_controls_full {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
}
.video_controls_alt {
    display: block;
}
#video_controls_left, #video_controls_right {
    display: table-cell;
    text-decoration: none;
    white-space:nowrap;
    overflow: hidden;
    height: 32px;
    width: 100px;
}
#video_controls_right {
    right: 0;
}
#progress_bar {
    z-index:1;
    display: table-cell;
    position: relative;
    height: 32px;
    width: auto;
    background-color: #000000;
    opacity: 0.33;
}
#progress_playing, #progress_text, #progress_text_total, #progress_text_title, #progress_clickme {
    position: absolute;
    white-space:nowrap;
    overflow: hidden;
    left: 0;
    top: 0;
    height: 32px;
    border: none;
}
#progress_playing {
    z-index:2;
    background-color: #ff0000;
}
#progress_text, #progress_text_total, #progress_text_title {
    vertical-align: middle;
    left: 1%;
    width: 98%;
    height:32px;
    line-height: 32px;
}
#progress_text {
    text-align: left;
    z-index:3;
}
#progress_text_total {
    text-align: right;
    z-index:4;
}
#progress_text_title {
    text-align: center;
    z-index:5;
}
#progress_clickme {
    z-index:6;
    width:100%;
}
.title {
    clear: both;
    width:100%;
    color:#00ffff;
    font-size:40px;
    white-space:nowrap;
    /*text-align:center;*/
}
#playlist {
    padding-left:10pt;
}
.index_entry {
    color:#00ffff;
    font-size:28px;
    white-space:nowrap;
}
img.index_thumbnail {
    width:THUMB_SIZEpx;
    vertical-align:middle;
    padding-bottom:8px;
    padding-right:8px;
}
.folder_entry {
    color:#00c0c0;
    font-size:32;
    white-space:nowrap;
}
.folder_icon {
    display: inline-block;
    background: url() no-repeat;
    height:32px;
    width:32px;
}
.info_text {
  color: #808080;
  font-size: 10px;
}
.center {
    text-align:center;
    margin: auto;
    width:50%;
}
.button_format {
    vertical-align:middle;
    background: transparent;
    border: none !important;
    font-size:0;
}
</style>

<title>TITLE_TEXT</title>

</head>

<body onload="PlayerInit();">
<div id='video_box' class='video_box' style="display:none;">
<video id="videoplayer" class='videoplayer' controls > <!-- Show controls now, or 'Silk' never will -->
    Get a <i>modern</i> browser that supports HTML5 Video.  If you see this, it doesn't, or it is disabled.<br/><br/>
    <a href="https://www.google.com/intl/en/chrome/browser/">Chrome</a><br/>
    <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a><br/>
    <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">IE, if your Windows version supports a new enough version.</a><br/>
    <a href="http://www.apple.com/safari/">Safari</a><br/>
    <a href="https://en.wikipedia.org/wiki/List_of_web_browsers">Others...</a><br/>
    <a href="http://www.w3schools.com/html/html5_video.asp">More info about compatibility...</a><br/>
</video>
<div id="video_controls" class='video_controls'>
    <div id="video_controls_left">
        <button id="bPrev"  class="button_format" type="button" tabindex='-1' title="Prev Video" onclick="javascript: return PlayPrev(); "><img src="" /></button>

        <button id="bSeq"   class="button_format" type="button" tabindex='-1' title="Shuffled" onclick="javascript: return PlayListSequential(); "><img src="" /></button>
        <button id="bRand"  class="button_format" type="button" tabindex='-1' title="Sequential" style='display:none;' onclick="javascript: return PlayListShuffle(); "><img src="" /></button>

        <button id="bPause" class="button_format" type="button" tabindex='-1' title="Paused" onclick="javascript: return TogglePause(); "><img src="" /></button>
        <button id="bPlay"  class="button_format" type="button" tabindex='-1' title="Play" style='display:none;' onclick="javascript: return TogglePause(); "><img src="" /></button>
    </div>
    <div id="progress_bar">
        <div id="progress_playing"></div>
        <div id="progress_text">00:00:00</div>
        <div id="progress_text_total">00:00:00</div>
        <div id="progress_text_title"></div>
        <div id="progress_clickme"></div>
    </div>
    <div id="video_controls_right">
        <button id="bFull"   class="button_format" type="button" tabindex='-1' title="Full Screen" onclick="javascript: return ToggleFullScreen();"><img src="" /></button>
        <button id="bWindow" class="button_format" type="button" tabindex='-1' title="Exit Full Screen" style='display:none;' onclick="javascript: return ToggleFullScreen();"><img src="" /></button>

        <button id="bNext"  class="button_format" type="button" tabindex='-1' title="Next Video" onclick="javascript: PlayNext(); return false;"><img src="" /></button>
    </div>
</div>
</div>
<a class="folder_entry" id="bToParent" style='display:none;' title="To Parent Folder" href="../VideoPlayer.html" ><img src="" /></a>
<div id="title" class="title"><img class="folder" />TITLE_TEXT</div>
<div id="playlist">
<!--INDEXES_HERE-->
</div>
<br/>
<div class="info_text">
    <a href="https://code.google.com/p/videowebscript/">Generated by VideoWebScript</a>
</div>

<script type="text/javascript">
var bShuffle = false;
var playlist;
var now_playing = null;
var video_box;
var video;
var video_controls;
var bPause;
var bPlay;
var bSeq;
var bRand;
var bPrev;
var bNext;
var progress_bar;
var progress_playing;
var progress_text;
var progress_text_total;
var progress_text_title;
var progress_clickme;
var bFullscreenEnabled = document.bFullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled;
var bFull;
var bWindow;
var bToParent;
var mouseTimeout;

/* If no full screen, or Amazon Silk, give up skinning controls */
var bUseNativeControls = !bFullscreenEnabled || /\bSilk\b/.test(navigator.userAgent) || /\bAndroid\b/.test(navigator.userAgent);


/** Press pause/play button */
function TogglePause()
{
    if( 0 == video.readyState )
        PlayMedia();
    else if( video.paused )
        video.play();
    else
        video.pause();
    return false;
}

/** When video is paused, change to show playing icon */
function ShowPaused()
{
    if( bUseNativeControls )
        return;
    bPause.style.display = video.paused ? 'none' : '';
    bPlay.style.display  = video.paused ? '' : 'none';
    return false;
}

/** See if video is not full-screen */
function VideoIsFullScreen()
{
    var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
    return video_box == fullscreenElement;
}

/** Press full-screen button */
function ToggleFullScreen()
{
    if( VideoIsFullScreen() )
        ExitFullscreen();
    else
        EnterFullscreen();
    return false;
}


/** Enter full screen mode */
function EnterFullscreen() 
{
    if(video_box.requestFullscreen) 
    {
        video_box.requestFullscreen();
    }
    else if(video_box.mozRequestFullScreen) 
    {
        video_box.mozRequestFullScreen();
    } 
    else if(video_box.webkitRequestFullscreen) 
    {
        video_box.webkitRequestFullscreen();
    }
    else if(video_box.msRequestFullscreen) 
    {
        video_box.msRequestFullscreen();
    }
}

/** Exit full screen mode */
function ExitFullscreen() 
{
    if(document.ExitFullscreen) 
    {
        document.ExitFullscreen();
    }
    else if(document.mozCancelFullScreen) 
    {
        document.mozCancelFullScreen();
    } 
    else if(document.webkitExitFullscreen) 
    {
        document.webkitExitFullscreen();
    }
    else if(document.msExitFullscreen)
    {
        document.msExitFullscreen();
    }
}


/** Check to see if player overflows, and fix it*/
function CheckAspect()
{
    if( VideoIsFullScreen() )
    {
        if( video.clientHeight > screen.availHeight )
        {
            video_box.className = 'video_box_alt';
            videoplayer.className = 'videoplayer_alt';
        }
        else if( video.clientWidth > screen.availWidth )
        {
            video_box.className = 'video_box_full';
            videoplayer.className = 'videoplayer_full';
        }
    }
}

/** Format seconds to hh:mm:ss */
function hhmmss(t)
{
    if( isNaN(t) )
        return "00:00:00";     // " My syntax highlighter chokes over colons in strings
        
    var ss = Math.floor(t % 60);
    var mm = Math.floor((t / 60) % 60);
    var hh = Math.floor(t / 3600);
    return '' + ((hh < 10) ? '0'+hh : hh) +':'+((mm < 10) ? '0'+mm : mm)+':'+((ss < 10) ? '0'+ss : ss); 
}
/** Update progress */
function UpdateTime()
{   
    progress_playing.style.width = (100*video.currentTime/video.duration)+'%';
    progress_text.innerHTML = hhmmss(video.currentTime);
    progress_text_total.innerHTML = hhmmss(video.duration);
    return false;
}
/** Refresh play time */
function RefreshProgress(seconds)
{
    progress_text.innerHTML = hhmmss(seconds);
    progress_text_total.innerHTML = hhmmss(video.duration);
    if( isNaN(video.duration) || video.duration < 1 )
    {
        progress_playing.style.width = '0%';
    }
    else
    {
        progress_playing.style.width = (100*seconds/video.duration)+'%';
    }
}

/** 
 One of the reasons I loathe 'web technolog'.  
 Half a dozen kinds of 'position' on an event, according  
 to what browser.
 http://www.kirupa.com/html5/getting_mouse_click_position.htm
 */
function getClickPosition(e) {
    var parentPosition = getPosition(e.currentTarget);
    var xPosition = e.clientX - parentPosition.x;
    var yPosition = e.clientY - parentPosition.y;
    return { x: xPosition, y: yPosition };
}
/** Get position of element, on-screen */
function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;
    var elementcurr = element; 
    while (elementcurr) {
        xPosition += (elementcurr.offsetLeft - elementcurr.scrollLeft + elementcurr.clientLeft);
        yPosition += (elementcurr.offsetTop - elementcurr.scrollTop + elementcurr.clientTop);
        elementcurr = elementcurr.offsetParent;
    }
    return { x: xPosition, y: yPosition, w:element.clientWidth, h:element.clientHeight };
}

/** Convert mouse position to time */
function getProgressFromMouse(e)
{
    var pt = getClickPosition(e);
    var fraction = pt.x/progress_clickme.clientWidth;
    return fraction;
}
/** Seek to clicked time */
function ProgressClick(e)
{
    var fraction = getProgressFromMouse(e);
    var time= video.duration * fraction;
    video.currentTime = time;
}
/** Mouse entered progress; disable time updates */
function ProgressIn(e)
{
    ProgressTrackMouse(e);
    video.removeEventListener( 'timeupdate', UpdateTime );
}
/** Mouse exited progress; enable time updates */
function ProgressOut(e)
{
    UpdateTime();
    video.addEventListener( 'timeupdate', UpdateTime );
}
/** Update progress bar and time with mouse motion */
function ProgressTrackMouse(e)
{   // Keep progress stamps from stomping on my tracking
    var fraction = getProgressFromMouse(e);
    var time= video.duration * fraction;
    RefreshProgress(time);
}

/** We should know how big&long the video is, so we can update it*/
function UpdateMeta()
{
    UpdateTime();
    OnResize();
}

/**
 * Set things up, when the page loads
**/
function MouseTimeout()
{
    if( VideoIsFullScreen() )
    {
        video_controls.style.display="none";
        video_box.style.cursor = 'none';
    }
    else
    {
        video_controls.style.display="table";
    }
    mouseTimeout = -1;
}

/** Mouse moved - */
function MouseMoved()
{
    if( VideoIsFullScreen() )
    {
        video_controls.style.display="table";
        if( -1 != mouseTimeout )
            clearTimeout(mouseTimeout);
        mouseTimeout = setTimeout( MouseTimeout, 3000 );
        video_box.style.cursor = '';
    }
    return true;
}

/**
 * Set things up, when the page loads
**/
function PlayerInit()
{
    video_box = document.getElementById("video_box");
    video_box.style.display = 'none';

    video = document.getElementById("videoplayer");
    video_controls = document.getElementById("video_controls");

    bPause= document.getElementById("bPause");
    bPlay = document.getElementById("bPlay");
    bFull = document.getElementById("bFull");
    bWindow=document.getElementById("bWindow");
    bPrev = document.getElementById("bPrev");
    bSeq  = document.getElementById("bSeq");
    bRand = document.getElementById("bRand");
    bNext = document.getElementById("bNext");
    progress_bar = document.getElementById("progress_bar");
    progress_text = document.getElementById("progress_text");
    progress_text_total = document.getElementById("progress_text_total");
    progress_text_title = document.getElementById("progress_text_title");
    progress_playing = document.getElementById("progress_playing");
    progress_clickme = document.getElementById("progress_clickme");

    bToParent = document.getElementById("bToParent");
    
    if( bUseNativeControls )
    {
        // If full-screen is unavailable to code, stick to native controls
        video.setAttribute("controls",true);
        video_controls.className = "video_controls_alt";
        // Drag these out of video controls, to make them accessible
        video_controls.appendChild(bPrev);
        video_controls.appendChild(bSeq );
        video_controls.appendChild(bRand);
        video_controls.appendChild(bNext);
        video_controls.removeChild(document.getElementById("video_controls_left"));
        video_controls.removeChild(document.getElementById("video_controls_right"));
        video_controls.removeChild(progress_bar);
    }
    else
    {
        // Had to add a layer on top of progress bar, to click
        progress_clickme.addEventListener( 'mousemove', ProgressTrackMouse );    
        progress_clickme.addEventListener( 'click', ProgressClick );
        progress_clickme.addEventListener( 'mouseover', ProgressIn );     
        progress_clickme.addEventListener( 'mouseout', ProgressOut ); 
    
        video.addEventListener( 'playing', ShowPaused );
        video.addEventListener( 'pause', ShowPaused );
        video.addEventListener( 'timeupdate', UpdateTime );
        video.addEventListener( 'loadedmetadata', UpdateMeta );

        window.addEventListener( 'OnResize', OnResize );
        window.addEventListener( 'webkitfullscreenchange', OnResize );
        window.addEventListener( 'mozfullscreenchangefullscreenchange', OnResize );
        window.addEventListener( 'MSFullscreenChange', OnResize );
    }

    MakePlaylist();
    OnResizeNow();
    bNext.setAttribute( 'title', "Next: " + TitleFromPath( WhatNext() ) );
    bPrev.setAttribute( 'title', "Prev: " + TitleFromPath( WhatPrev() ) );

    var params = window.location.href.split('?');
    if( 2 == params.length )
    {   // If we have '?title.mp4' that's the video in this folder, to play
        PlayMedia(decodeURI(params[1]));
    }

    // If we have a parent, show a 'back' link to it
    // Note: This will only work with pages served from a web server.
    // If you open it from the file system, it will remain hidden, and get an
    // error in the page's log output about needing to be 'same domain'.
    var request = new XMLHttpRequest();
    request.open('GET', '../VideoPlayer.html', true);
    request.onreadystatechange = function()
    {
        if (request.readyState === 4)
        {
            if (request.status === 200)
            {   // If a parent html page exists, display a link to it
                bToParent.style.display = 'inline';
            }
        }
    };
    try {
        request.send();
    } 
    catch(e) {};

}

/** Window changed: Organize and update controls */
function OnResize()
{
    // Because some browsers don't have this figured out, even though they call me
    setTimeout(OnResizeNow,30);
}
function OnResizeNow()
{
    if( !bUseNativeControls )
    {   // Sort out full versus windowed playbacl
        if( video.hasAttribute("controls") )
            video.removeAttribute("controls");
        if( VideoIsFullScreen() )
        {
            bWindow.style.display="";
            bFull.style.display="none";
            video_controls.className = 'video_controls_full';
            video_box.className = 'video_box_full';
            videoplayer.className = 'videoplayer';
            // Once we re-render, check video aspect, and adjust
            setTimeout(CheckAspect,100);
        }
        else
        {
            bWindow.style.display="none";
            bFull.style.display="";
            video_controls.className = 'video_controls';
            video_box.className = 'video_box';
            videoplayer.className = 'videoplayer';
            video_controls.style.display="table";
            if( -1 != mouseTimeout )
                clearTimeout(mouseTimeout);
            video_box.style.cursor = '';
        }
    }
    
    return false;
}

/*
 * Play a video
 * http://www.w3.org/2010/05/video/mediaevents.html
 */
function PlayMedia(video_path)
{   // Setting attributes blows up 
    if(typeof(video_path)==='undefined')
    {
        video_path = playlist[0].getAttribute('path');
    }
    now_playing = video_path;
    if( 'undefined' == typeof(now_playing) )
    {
        progress_text_title.innerHTML = '';
        video_box.style.display = 'none';
        video_box.removeEventListener( 'mousemove', MouseMoved );
        return;
    }
    setTimeout(function() { PlayMedia2(video_path) }, 10);
    OnResizeNow();
    bNext.setAttribute( 'title', "Next: " + TitleFromPath( WhatNext() ) );
    bPrev.setAttribute( 'title', "Prev: " + TitleFromPath( WhatPrev() ) );
    return false;
}

/** Setting attributes kills the video... so let the stack unwind and start it second */
function PlayMedia2(video_path)
{
    video_box.style.display = '';

    var video_type='video/'+now_playing.split('.').pop();
    video.setAttribute("type",video_type);
    video.setAttribute("src",now_playing);
    video.load();
    video.play();
    video.addEventListener( "ended", PlayNext );

    // Show title
    progress_text_title.innerHTML = TitleFromPath(now_playing);

    // Show video
    window.scrollTo(0,0);
    
    video_box.addEventListener( 'mousemove', MouseMoved );
    
    // Tell display to come back up, between titles
    UpdateTime();
    MouseMoved();
}

/** Make a play list from title links */
function MakePlaylist()
{
    var collection = document.getElementsByClassName("index_entry");
    var array = new Array();
    var i;
    for( i = 0; i < collection.length; ++i )
    {
        array.push(collection[i]);
    }
    bRand.style.display = '';
    bSeq.style.display  = 'none';
    bShuffle = false;
    playlist = array;
}

/** Shuffle a play list */
function PlayListSequential()
{
    MakePlaylist();
    return PlayMedia();
}

/** Shuffle a play list */
function PlayListShuffle()
{
    ArrayShuffle(playlist);
    ArrayShuffle(playlist);
    ArrayShuffle(playlist);
    bRand.style.display = 'none';
    bSeq.style.display  = '';
    bShuffle = true;
    return PlayMedia();
}
/**
 * Shuffle an array
 * @param array Array to shuffle in-place
 * @return Array passed in
**/
function ArrayShuffle(array)
{
    var ri;
    var tmp;
    var i = array.length;
    while( i-- )
    {
        ri = Math.floor(Math.random() * array.length);
        tmp = array[i];
        array[i] = array[ri];
        array[ri] = tmp;
    }
    return array;
}
/** Get index of currently playing media */
function IndexPlaying()
{
    var i = playlist.length;
    while( 0 <= --i )
    {
        if( playlist[i].getAttribute('path') == now_playing )
            return i;
    }
    return -1;
}
/** Play the previous one */
function PlayPrev()
{
    PlayMedia(WhatPrev());
    return false;
}
/** Play the next one */
function PlayNext()
{
    PlayMedia(WhatNext());
    return false;
}
/** What will play previous */
function WhatPrev()
{
    var i = IndexPlaying() - 1;
    if( i < 0 )
    {
        i = playlist.length-1;
    }
    var path = playlist[i].getAttribute('path')
    return path;
}
/** Play the next one */
function WhatNow()
{
    var i = IndexPlaying();
    var path = playlist[i].getAttribute('path')
    return path;
}
/** What will play next */
function WhatNext()
{
    var i = IndexPlaying() + 1;
    if( i >= playlist.length )
    {
        i = 0;
    }
    var path = playlist[i].getAttribute('path')
    return path;
}
/** Turn video URI into title text */
function TitleFromPath(path)
{
    var titletext = decodeURI(path);
    titletext = titletext.substring(titletext.lastIndexOf('/')+1);
    titletext = titletext.substring(0,titletext.lastIndexOf('.'));
    return titletext;
}
</script>

</body>
</html>
